<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" bottom="128" @up="upCallback"
			:safearea="true" :down="downOption" :up="upOption">
			<view class="list">
				<view class="list-item" v-for="(item,index) in tableData" :key="index" @click="edit(item)">
					<image src="../../../static/images/recommend.png" class="recommend-icon" v-if="item.pushZoneId">
					</image>
					<view>{{item.name}}</view>
					<view>
						<text style="color: #AAAAB9;" v-if="item.activeStatus == 0">{{$t('operate.hasNotStarted')}}</text> <!--未开始-->
						<text v-if="item.activeStatus == 1">{{$t('operate.inProgress')}}</text><!--进行中-->
						<text style="color: #AAAAB9;" v-if="item.activeStatus == 2">{{$t('operate.over')}}</text><!--已结束-->
						<text class="iconfont iconarrow-right1"></text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="bottomBox" :style="{paddingBottom: `${bottomLift}px`}">
			<view class="button">
				<view class="add-button" @click="addClick">{{$t('operate.addZone')}}</view><!--添加专区-->
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		zoneList
	} from "@/api/storeGoods.js";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					}
				},
				tableData: [],
				tableFrom: {
					name: "",
					page: 1,
					limit: 20,
				},
				bottomLift: app.globalData.bottomLift,
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.zone')  //专区
			})
		},
		methods: {
			upCallback(page) {
				let _this = this
				this.tableFrom.page = page.num
				zoneList(this.tableFrom).then(res => {
					console.info(res.data)
					var data = res.data.list;
					if (page.num == 1) _this.tableData = [];
					data.map((item) => {
						const now = new Date();
						if (item.startTime) {
							const startTime = new Date(Date.parse(item.startTime.replace(/-/g, "/")));
							const endTime = new Date(Date.parse(item.endTime.replace(/-/g, "/")));
							if (now < startTime) {
								item.activeStatus = 0;
							} else if (now > startTime && now < endTime) {
								item.activeStatus = 1;
							} else {
								item.activeStatus = 2;
							}
						} else {
							item.activeStatus = 3;
						}
					});
					_this.tableData = _this.tableData.concat(data);
					_this.mescroll.endBySize(data.length, res.data.total);
				})
			},
			/**
			 * 新增专区*/
			addClick() {
				var _this = this
				uni.navigateTo({
					url: "./create-zhuanqu/index",
					events: {
						someEvent: function(data) {
							_this.mescroll.resetUpScroll(false)
						}
					}
				})
			},
			edit(item) {
				var _this = this
				uni.navigateTo({
					url: `./create-zhuanqu/index?id=${item.id}`,
					events: {
						someEvent: function(data) {
							_this.mescroll.resetUpScroll(false)
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('special_area_data', {
							data: item
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.list {
		background-color: #FFFFFF;

		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 108rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #F5F5F8;
			position: relative;
		}

		.recommend-icon {
			width: 42rpx;
			height: 42rpx;
			position: absolute;
			left: 0rpx;
			top: 0rpx;
		}

		.iconfont {
			font-size: 24rpx;
			color: #AAAAB9;
		}
	}

	.bottomBox {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.button {
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-button {
		width: 690rpx;
		height: 92rpx;
		background-color: #111111;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 92rpx;
	}
</style>
